
<main>
	<div class="container">
		<div class="search">
			<div class="back" on:click={back}>←</div>
			<input class="searchInput" bind:value={userSearch} on:input={userInput} placeholder="搜索cpu型号" type="text">
			<p> 查找结果 {cpuList.length}</p>
		</div>
		<div class="list">
			<div style="flex-basis: 5rem;"></div>
			<ul class="comparisonList">
				{#each comparisonList as { name, score } , index}
					<li class="cpuCell">
						<div class="cpu">
							<span class="ranking">{index+1}</span>
							<span class="cpu_name">{name}</span> 
							<div class="ws comparison_cpu">
								<span class="cpu_score">
									{score}
									{#if comparisonList.length>1&&comparisonList[index-1]}
										<!-- <span class="cpu_rate">-{(((comparisonList[index-1].score-score)/comparisonList[index-1].score)*100).toFixed(2)}%</span>  -->
										<span class="cpu_rate">-{(((comparisonList[index-1].score-score)/score)*100).toFixed(2)}%</span> 
									{/if}
								</span> 
								<span class="delBtn" on:click={()=>{delComparisonListItem(index)}}>删除</span> 
							</div>
						</div>
					</li>
				{/each}
			</ul>
			<ul class="cpuList" on:scroll={listScroll}>
				{#each cpuList as { name, score ,ranking } , index}
					<li class="cpuCell">
						{#if index<startIndex||index>endIndex}
							<div></div>
						{:else}
							<div class="cpu">
								{#if ranking }
									<span class="ranking">{ranking+1}</span>
								{:else}
									<span class="ranking">{index+1}</span>
								{/if}
								<span class="cpu_name">{name}</span> 
								<div class="ws">
									<span class="cpu_score">{score}</span> 
									<span class="contrast" on:click={()=>{addContrast(index)}}>加入对比</span> 
								</div>
							</div>
						{/if}
					</li>
				{/each}
			</ul>
		</div>
	</div>
</main>

<style>
main{
	height: 100%;
	width: 100%;
}
.container{
	box-sizing: border-box;
	padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
	height: 100%;
	width: 100%;
	font-size: 1rem;
}
.search{
	position: fixed;
	top: constant(safe-area-inset-top);
    top: env(safe-area-inset-top);
	background: rgb(233, 233, 233);
	width: 100%;
	height: 5rem;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	padding: 0px 1rem;
	box-sizing: border-box;
}
.ranking{
	min-width: 3rem;
	height: 3rem;
	padding: 0px 1rem;
	box-sizing: border-box;
	background: rgb(255, 255, 255);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0.5rem;
	font-size: 1rem;
}
.back{
	font-size: 1rem;
	margin-right:1rem;
	width:4rem;
	height: 70%;
	background: white;
	white-space: nowrap;
	border-radius: 0.3rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.list{
	display: flex;
	flex-flow: column;
	height: 100%;
	width: 100%;
}
.comparisonList{
	max-height: 50%;
	overflow:auto;
	/* border-bottom: 1px solid rgb(224, 224, 224); */
	
}
.comparisonList .ranking{
	background: rgb(255, 98, 50);
	color: white;
}
.comparison_cpu{
	position: relative;
}
.cpu_rate{
	position: absolute;
	right: 0px;
	top: 0px;
	transform: translate(0%,-100%);
	color: red;
	font-size: 1rem;
}
.searchInput{
	flex: 1;
	/* width: 70%; */
	height: 70%;
	border: none;
	border-radius: 0.3rem;
	text-align: center;
	margin-right: 1rem;
}
.cpuList{
	height: 100%;
	width: 100%;
	flex: 1;
	overflow-y: scroll;
	/* padding-bottom:5rem; */
}
.cpu{
	height: 100%;
	padding:0px 2rem;
	font-size: 0.1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	
}
.cpuCell{
	height: 6rem;
	border-bottom: white solid 1px;
	background: rgb(240, 240, 240);
}
.cpu_name{
	font-weight: 800;
	padding:0px 2rem;
	font-size: 1rem;
}
.cpu_score{
	color: rgb(94, 94, 94);
	font-size: 1rem;
}
.comparison_cpu .cpu_score{
	position: relative;
}
.contrast,.delBtn{
	padding: 1rem 1rem;
	box-sizing: border-box;
	background: rgb(255, 136, 68);
	border-radius: 0.5rem;
	margin-left: 1rem;
	color: white;
	font-size: 1rem;
	user-select: none;
	cursor: pointer;
	white-space: nowrap;
}
.ws{
	white-space: nowrap;
}
.delBtn{
	background: rgb(255, 50, 50);
}
</style>

<script>
	let userSearch = "";
	let cpuList = [];//显示数据
	let listData =[];//缓存的所有数据
	let comparisonList=[];//比较列表
	let cellHeight = 0;//高度
	let startIndex = 0;//显示的开始位置 
	let endIndex = 100;//显示的结束位置 
	let startTime = new Date().getTime();
	try{
		window.$G.removeBackButton()
	}catch(e){}

	window.addEventListener("DOMContentLoaded", function() {
		const targetNode = document.querySelector(".cpuList");
			// 观察器的配置（需要观察什么变动）
			const config = { attributes: true, childList: true, subtree: true };
			// 当观察到变动时执行的回调函数
			const callback = function(mutationsList, observer) {
				console.log("发生变动",new Date().getTime()-startTime)
			};
			// 创建一个观察器实例并传入回调函数
			const observer = new MutationObserver(callback);
			// 以上述配置开始观察目标节点
			observer.observe(targetNode, config);
			// 之后，可停止观察
			observer.disconnect();
	});
	window.onload=function(){
		console.log("渲染结束",new Date().getTime()-startTime)
	}

	getCpuData().then((data)=>{
		cpuList = data;
		listData =data;
		setTimeout(function(){
			let firstEle = document.querySelector(".cpuCell")
			cellHeight = firstEle.offsetHeight 
		},1000)
	})
	function findCpu(name){
		var findArr = [];
		listData.forEach((item,index)=>{
			if(item.name.toLowerCase().indexOf(name.toLowerCase())>=0){
				findArr.push({
					ranking:index,
					name:item.name,
					score:item.score
				})
			}
		})
		return findArr;
	}
	function getCpuData(){
		return new Promise((resolve,reject)=>{
			var url = "./cpuData.json"
			var request = new XMLHttpRequest();
			request.open("get", url);
			request.send(null);
			request.onload = function () {
				if (request.status == 200) {
					var json = JSON.parse(request.responseText);
					resolve(json)
				}else{
					reject({msg:"加载失败"})
				}
			}
		})
	}
	let userInputTimeOut = null;
	function userInput(e){
		console.log(userSearch,"userSearch");
		clearTimeout(userInputTimeOut);
		userInputTimeOut=setTimeout(() => {
			let  r = findCpu(userSearch);
			if(r.length>0){
				cpuList = r;
			}else{
				cpuList = [];
			}
			if(userSearch==""){
				cpuList = listData;
			}
		}, 500);
	}

	let windowHeight = window.innerHeight;
	function listScroll(e){
		let scrollTop = e.target.scrollTop ;
		startIndex = parseInt(scrollTop/cellHeight);
		endIndex = parseInt((scrollTop+windowHeight)/cellHeight);
	}

	function addContrast(index){
		let selectItem = cpuList[index]
		let find = comparisonList.find((item)=>{
			return item.name == selectItem.name;
		})
		if(!find){
			comparisonList.push(selectItem);
			comparisonList.sort((a,b)=>{
				return b.score-a.score
			})
			comparisonList=comparisonList;
			console.log(index,"index",comparisonList)
		}else{
			alert("已经存在")
		}
	}
	function delComparisonListItem(index){
		comparisonList.splice(index,1);
		comparisonList=comparisonList;
	}

	function back(){
		try{
			window.$G.exitWebApp();
		}catch(e){

		}
	}


</script>
